<template>
  <div>
    <Card>
      <Table border :columns="columns9" :data="data9" size="small" ref="table"></Table>

      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :total="50" show-sizer/>
        </div>
      </div>
    </Card>
  </div>

</template>
<script>
  import Buttons from "../../utils/buttons";
    export default {
        data() {
            return {
                message: [],
                columns9: [
                    {
                        title: '服务名称',
                        key: 'service',
                        align: 'center',
                    },
                    {
                        title: '端口',
                        key: 'port',
                        align: 'center'
                    },
                    {
                        title: '运行状态',
                        align:"center",
                        key: 'status',
                        render: (h, params) => {
                            console.log(params)
                            const row = params.row;
                            const color = row.status === 1 ? 'green' : row.status === 2 ? 'red' : 'orange';
                            const text = row.status === 1 ? '已运行' : row.status === 2 ? '已关闭' : '已停止';

                            return h('Tag', {
                                props: {
                                    type: 'dot',
                                    color: color
                                }
                            }, text);
                        }
                    },
                    {
                        title: '启动时间',
                        key: 'start_time',
                        align: 'center'
                    },
                    {
                        title: '运行时间',
                        key: 'run_time',
                        align: 'center'
                    },
                ],
                data9: [
                    {
                        service: 'nginx',
                        port: 80,
                        status: 1,
                        start_time: '2020-07-18 16:33:25',
                        run_time: '2天',
                    },
                    {
                        service: 'mysql',
                        port: 3306,
                        status: 2,
                        start_time: '2020-07-10 13:33:33',
                        run_time: '10天',
                    },
                    {
                        service: 'kafka',
                        port: 9092,
                        status: 1,
                        start_time: '2020-06-13 12:12:22',
                        run_time: '5天',
                    },
                    {
                        service: 'elasticsearch',
                        port: 9200,
                        status: 3,
                        start_time: '2020-05-22 20:00:00',
                        run_time: '30天',
                    },
                ]
            }
        },
        methods: {
            handleSelectAll(status) {
                this.$refs.table.selectAll(status);
            },
            show(index) {
                this.$Modal.info({
                    title: '主机信息',
                    draggable: true,
                    content: `主机名：${this.data7[index].hostname}
                          <br>主机组：${this.data7[index].hostgroup}
                          <br>IP地址：${this.data7[index].ip}
                          <br>CPU信息：${this.data7[index].cpuinfo}
                          <br>内存信息：${this.data7[index].meminfo}
                          <br>磁盘信息：${this.data7[index].diskinfo}`
                })
            },
            remove(index) {
                this.data7.splice(index, 1);
            },
            exportData(type) {
                if (type === 1) {
                    this.$refs.table.exportCsv({
                        filename: 'The original data'
                    });
                } else if (type === 2) {
                    this.$refs.table.exportCsv({
                        filename: 'Sorting and filtering data',
                        original: false
                    });
                } else if (type === 3) {
                    this.$refs.table.exportCsv({
                        filename: 'Custom data',
                        columns: this.columns8.filter((col, index) => index < 4),
                        data: this.data7.filter((data, index) => index < 4)
                    });
                }
            }
        }
    }
</script>

<style scoped>
  .btn {
    float: left;
    margin-right: 10px;
  }
</style>
